<template>
  <div style="position: absolute; ">
    <div style="padding: 16px 0 16px 0">
      <sea-table-title title="用户海报" subtitle="主要用于绩效考核，生成客户经理名片。客户扫描客户经理的二维码，办理业务之后，系统将业绩直接算到客户经理名下。"></sea-table-title>
    </div>
    <div :style="background_style" class="bg-gray" style="background: url('/static/img/user_poster_bg.jpg'); background-size: cover">
      底图
      <div :style="qrcode_style" class="bg-blue">
        二维码
      </div>
      <div :style="font_style">
        {{ font.content }}
      </div>
    </div>

    <div style="position: absolute; left: 496px; width: 196px">
      <el-divider content-position="left">二维码配置</el-divider>

      <label>width：
        <el-input size="small" v-model="qrcode.width"></el-input>
      </label>
      <label>height：
        <el-input size="small" v-model="qrcode.height"></el-input>
      </label>
      <br>
      <label>left：
        <el-input size="small" v-model="qrcode.left"></el-input>
      </label>
      <label>top：
        <el-input size="small" v-model="qrcode.top"></el-input>
      </label>

      <el-divider content-position="left">字体</el-divider>

      <label>content：
        <el-input size="small" v-model="font.content"></el-input>
      </label>

      <label>font-family：
        <el-input size="small" v-model="font.font"></el-input>
      </label>
      <label>font-size：
        <el-input size="small" v-model="font.size"></el-input>
      </label>
      <br>
      <label>left：
        <el-input size="small" v-model="font.left"></el-input>
      </label>
      <label>top：
        <el-input size="small" v-model="font.top"></el-input>
      </label>
    </div>
  </div>
</template>

<script>

/**
 * 客户海报
 *
 * 还未对接后台，相关设计已经完成，调整之后使用;
 * 或许可以使用画布来实现这一功能，以后有空再研究。
 */
export default {
    name: "403",
    data() {
        return {
            background: {width: 400, height: 560},
            qrcode: {width: 200, height: 200, left: 50, top: 30},
            font: {left: 280, top: 520, font: '黑体', size: 8, content: '客户经理：刘蛋蛋'}
        }
    },
    computed: {
        background_style: function () {
            let style = this.background;
            return `width: ${style.width}px;height:${style.height}px;position: absolute`;
        },
        qrcode_style: function () {
            let style = this.qrcode;
            return `left: ${style.left}px;top: ${style.top}px;width: ${style.width}px;height: ${style.height}px; position: absolute;`;
        },
        font_style: function () {
            let style = this.font;
            return `left: ${style.left}px;top: ${style.top}px;font-size: ${style.size}px;font-family: ${style.font};position: absolute;`;
        }
    }
}
</script>

<style scoped>
</style>
